<template>
  <div class="box">
    <van-nav-bar title="严选专栏" left-arrow @click-left="onClickLeft" />
    <ul>
      <li v-for="(item,index) in handpList" :key="index" @click="$router.push('/wenzhan/'+item.id)">
        <img :src="item.pic" alt />
        <p class="p1">{{ item.title }}</p>
        <p class="p2">{{ item.descript }}</p>
        <p class="p3">查看详情</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      handpList: [],
    };
  },
  created() {},
  mounted() {
    this.handp();
  },
  methods: {
    handp() {
      this.$axios
        .get("https://api.it120.cc/small4/cms/news/list")
        .then((res) => {
          this.handpList = res.data;
          // console.log(res);
        });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped lang="less">
.box {
  width: 100%;
  ul {
  width: 100%;

    li {
      width: 7.5rem;
      text-align: center;
      position: relative;
      margin-bottom: 0.14rem;
      img {
        width: 7.24rem;
        height: 3.69rem;
        display: block;
        background: rgba(0, 0, 0, 0.7);
        margin-left: 0.1rem;
      }
      p {
        font-size: 0.16rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #ffffff;
        text-align: center;
      }
      .p1 {
        position: absolute;
        top: 0.8rem;
        font-size: 0.4rem;
        width: 6rem;
        margin-left: 8%;
      }
      .p2 {
        width: 5.78rem;
        font-size: 0.3rem;
        position: absolute;
        top: 1.64rem;
        margin-left: 12%;
      }
      .p3 {
        position: absolute;
        top: 2.22rem;
        width: 1.6rem;
        height: 0.58rem;
        line-height: 0.58rem;
        border: 0.01rem solid #ffffff;
        border-radius: 0.5rem;
        font-size: 0.26rem;
        text-align: center;
        color: #ffffff;
        margin-left: 36%;
      }
      // :nth-of-type(1) {
      //   position: absolute;
      //   top: 0.8rem;
      //   overflow: hidden;
      //   text-overflow: ellipsis;
      //   white-space: nowrap;
      //   color: #ffffff;
      //   text-align: center;
      //   font-size: 0.4rem;
      // }
      // :nth-of-type(2) {
      //   width: 5.78rem;
      //   position: absolute;
      //   top: 1.64rem;
      //   overflow: hidden;
      //   text-overflow: ellipsis;
      //   white-space: nowrap;
      //   color: #ffffff;
      //   font-size: 0.3rem;
      //   text-align: center;
      // }
      // :nth-of-type(3) {
      //   position: absolute;
      //   top: 2.21rem;
      //   width: 1.6rem;
      //   height: 0.58rem;
      //   line-height: 0.58rem;
      //   border: 0.01rem solid #ffffff;
      //   border-radius: 0.5rem;
      //   font-size: 0.26rem;
      //   text-align: center;
      //   color: #ffffff;
      // }
    }
  }
}
</style>
